<template>
  <div class="order-container">
    <el-card class="order-card">
      <div class="order-header">
        <h2>我的订单</h2>
      </div>

      <div class="order-content">
        <!-- 添加空数据提示 -->
        <el-empty
          v-if="!loading && (!orderList || orderList.length === 0)"
          description="暂无订单数据"
        >
          <el-button type="primary" @click="$router.push('/goods')">
            去购物
          </el-button>
        </el-empty>

        <!-- 订单列表 -->
        <template v-else>
          <el-table
            v-loading="loading"
            :data="orderList"
            style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          >
            <el-table-column label="商品信息" width="500">
              <template slot-scope="scope">
                <div class="product-info">
                  <img :src="scope.row.img" class="product-img">
                  <div class="product-detail">
                    <div class="product-name">{{ scope.row.product }}</div>
                    <div class="order-id">订单号：{{ scope.row.id }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="收货人" width="120">
              <template slot-scope="scope">
                {{ scope.row.customer }}
              </template>
            </el-table-column>

            <el-table-column label="金额" width="120">
              <template slot-scope="scope">
                <span class="price">¥{{ scope.row.payment }}</span>
              </template>
            </el-table-column>

            <el-table-column label="收货地址" width="200">
              <template slot-scope="scope">
                {{ scope.row.address }}
              </template>
            </el-table-column>

            <el-table-column label="联系电话" width="150">
              <template slot-scope="scope">
                {{ scope.row.phone }}
              </template>
            </el-table-column>

            <el-table-column label="订单状态" width="120">
              <template slot-scope="scope">
                <el-tag :type="scope.row.shipping === 1 ? 'success' : 'warning'">
                  {{ scope.row.shipping === 1 ? '已发货' : '待发货' }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button 
                  type="text" 
                  size="small"
                  @click="viewOrderDetail(scope.row)"
                >
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页器 -->
          <div class="pagination-container" v-if="total > 0">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </div>
        </template>
      </div>
    </el-card>

    <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <div v-if="currentOrder" class="order-detail">
        <div class="detail-item">
          <img :src="currentOrder.img" class="detail-img">
        </div>
        <div class="detail-item">
          <span class="label">商品名称：</span>
          <span>{{ currentOrder.product }}</span>
        </div>
        <div class="detail-item">
          <span class="label">订单编号：</span>
          <span>{{ currentOrder.id }}</span>
        </div>
        <div class="detail-item">
          <span class="label">收货人：</span>
          <span>{{ currentOrder.customer }}</span>
        </div>
        <div class="detail-item">
          <span class="label">联系电话：</span>
          <span>{{ currentOrder.phone }}</span>
        </div>
        <div class="detail-item">
          <span class="label">收货地址：</span>
          <span>{{ currentOrder.address }}</span>
        </div>
        <div class="detail-item">
          <span class="label">订单金额：</span>
          <span class="price">¥{{ currentOrder.payment }}</span>
        </div>
        <div class="detail-item">
          <span class="label">订单状态：</span>
          <el-tag :type="currentOrder.shipping === 1 ? 'success' : 'warning'">
            {{ currentOrder.shipping === 1 ? '已发货' : '待发货' }}
          </el-tag>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Order',
  data() {
    return {
      loading: false,
      orderList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      currentOrder: null
    }
  },
  created() {
    // 检查用户是否登录
    if (this.$store.getters.getUser) {
      this.getOrderList()
    } else {
      this.$router.push('/')
      this.$store.commit('setShowLogin', true)
    }
  },
  methods: {
    // 获取订单列表
    getOrderList() {
      this.loading = true
      const token = localStorage.getItem('token')
      
      this.$axios
        .get('/shop/get_by_user_id', {
          headers: {
            'Authorization': token
          },
          params: {
            page: this.currentPage,
            pageSize: this.pageSize
          }
        })
        .then(res => {
          console.log(res)
          if (res.data.success && res.data.data) {
            // 从分页数据中获取订单记录
            this.orderList = res.data.records || []
            // 获取总数
            this.total = res.data.total || 0
            // 更新当前页码
            this.currentPage = res.data.data.current
            this.pageSize = res.data.data.size
          } else {
            this.orderList = []
            this.total = 0
          }
          this.loading = false
        })
        .catch(err => {
          console.error('获取订单列表失败:', err)
          this.$message.error('获取订单列表失败')
          this.loading = false
          if (err.response && err.response.status === 401) {
            // 如果是未授权错误，跳转到登录
            this.$store.commit('setShowLogin', true)
            this.$router.push('/')
          }
        })
    },
    // 查看订单详情
    viewOrderDetail(order) {
      this.currentOrder = order
      this.dialogVisible = true
    },
    // 分页处理
    handleCurrentChange(val) {
      this.currentPage = val
      this.getOrderList()
    }
  }
}
</script>

<style scoped>
.order-container {
  max-width: 1225px;
  margin: 0 auto;
  padding: 20px;
}

.order-card {
  margin-bottom: 20px;
}

.order-header {
  margin-bottom: 20px;
}

.order-header h2 {
  font-size: 20px;
  color: #333;
  font-weight: 500;
}

.product-info {
  display: flex;
  align-items: center;
}

.product-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 15px;
  border-radius: 4px;
}

.product-detail {
  flex: 1;
}

.product-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.order-id {
  font-size: 12px;
  color: #999;
}

.price {
  color: #ff6700;
  font-weight: bold;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 订单详情样式 */
.order-detail {
  padding: 20px;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.detail-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin: 0 auto 20px;
  display: block;
  border-radius: 4px;
}

.label {
  width: 100px;
  color: #666;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .order-container {
    padding: 10px;
  }
  
  .product-img {
    width: 60px;
    height: 60px;
  }
  
  .detail-img {
    width: 150px;
    height: 150px;
  }
}
</style> 